class Snake{
  // 蛇头
  head : HTMLElement;
  // 蛇的 身体（包括蛇头）其中HTMLCollection可以实时更新
  bodies:HTMLCollection
  // 获取蛇的容器
  element:HTMLElement;
  constructor(){
    this.element = document.getElementById('snake')!;
   this.head = document.querySelector('#snake>div') as HTMLElement;
  this.bodies = this.element.getElementsByTagName('div');
  }
  // 获取蛇的坐标
  get X(){
    return this.head.offsetLeft;
  }
  get Y(){
    return this.head.offsetTop;
  }
  // 设置蛇头的坐标
  set X(value){
    if(this.X === value){
      return ;
    }
    if(value<0 || value>290)
    {
      throw new Error('蛇撞墙了！');
      return ;
    }
    if(this.bodies[1]&&(this.bodies[1] as HTMLElement).offsetLeft == value)
    {
      if(value >this.X)
      {
        value = this.X-10
      }
      else{
        value = this.X+10
      }
    }
    this.moveBody()
    this.head.style.left = value+'px'
    this.checkHeadBody()
  }
  set Y(value){
    if(this.Y== value){
      return ;
    }
    if(value<0 || value>290)
    {
      throw new Error('蛇撞墙了！');
    }
    if(this.bodies[1]&&(this.bodies[1] as HTMLElement).offsetTop == value)
    {
      if(value >this.Y)
      {
        value = this.Y-10
      }
      else{
        value = this.Y+10
      }
    }
    this.moveBody()
    this.head.style.top = value+'px'
    this.checkHeadBody()
  }
//  蛇增加身体的方法
addBody(){
  this.element.insertAdjacentHTML("beforeend",'<div></div>')
}
moveBody(){
  // 一截一截修改蛇的位置，后一个等于前一个
  for(let i= this.bodies.length-1;i>0;i--)
  {
    let X = (this.bodies[i-1]as HTMLElement).offsetLeft ;
    let Y = (this.bodies[i-1]as HTMLElement).offsetTop ;
    (this.bodies[i]as HTMLElement).style.left = X+'px';
    (this.bodies[i]as HTMLElement).style.top= Y+'px';
  }
}
checkHeadBody(){
  // 检查其他身体部分和蛇头重叠没有
  for(let i =1;i<this.bodies.length;i++){
    let Z = this.bodies[i] as HTMLElement
    if(this.X === Z.offsetLeft && this.Y === Z.offsetTop){
      throw new Error("撞到自己了！")
    }
  }
}
}
export default Snake;